<!--
*
*Author: 黄逸飞
*Date: 2023/06/29
*pageName: 资源目录
*
-->
<template>
  <div id="catalogue">
    <!-- 搜索框 -->
    <el-input
      v-model="search"
      placeholder="请输入关键字"
      clearable
      size="small"
      suffix-icon="el-icon-search"
      style="width: 250px"
      @keyup.enter.native="handleSearch(data)"
      @change="handleSearch(data)"
    >
    </el-input>
    <!-- 内容 -->
    <el-row :gutter="20">
      <!-- 每列 -->
      <el-col :span="6" v-for="(col, index) in colList" :key="index">
        <div class="grid-content">
          <!-- 列中各模块 -->
          <div class="item_box" v-for="item in col" :key="item.modelCategoryId">
            <p>{{ item.categoryName }}</p>
            <div
              class="element_box"
              v-for="ele in item.cgModels"
              :key="ele.modelId"
              @click="
                toCatalogueInfo(
                  ele.modelId,
                  ele.modelType,
                  item.categoryName + '-' + ele.modelName
                )
              "
            >
              <label>
                <svg-icon
                  style="margin-right: 5px"
                  :iconClass="ele.icon ? ele.icon : 'icon-question'"
                ></svg-icon>
                {{ ele.modelName }}
              </label>
              <span style="color: #c4c6cc">{{ ele.exampleCount }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getModelCategoryList_Api, //模型分组列表
  // getModelSearch_Api, //模型列表查询（搜索）
} from "@/api/configuration/model.js";
export default {
  data() {
    return {
      search: "", //搜索框
      colList: [], //二维数组，存放四列的数据，最终渲染的数组
      data: [], //请求的数据
    };
  },
  methods: {
    //获取目录数据
    getData() {
      getModelCategoryList_Api().then((res) => {
        this.data = res.data;
        this.waterFall(this.data);
      });
    },
    //搜索
    handleSearch(data) {
      if (this.search) {
        //把符合条件的数据筛选出来
        const tampArr = data.filter((item) => {
          item = { ...item };
          item.cgModels = item.cgModels.filter((ele) =>
            ele.modelName.includes(this.search)
          );
          if (item.cgModels.length) return true;
        });
        this.waterFall(tampArr);
      } else this.waterFall(this.data);
    },
    //瀑布流布局
    waterFall(data) {
      this.colList = [];
      //遍历数据，放到colList二维数组中渲染
      for (let i = 0; i < data.length; i++) {
        if (i < 4) {
          //前四个直接放置
          const tempArr = [];
          tempArr.push(data[i]);
          this.colList.push(tempArr);
        } else {
          //返回每列盒子里的children个数和
          const colLength = this.colList.map((item) => {
            let length = 0;
            item.forEach((element) => {
              length += element.cgModels.length;
            });
            return length;
          });
          //找到列中最小的数字，得到其下标
          const minIndex = colLength.indexOf(Math.min(...colLength));
          //放到对应的位置
          this.colList[minIndex].push(data[i]);
        }
      }
    },
    //跳转到资源详情页面
    toCatalogueInfo(id, modelType, name) {
      this.$router.push({
        path:
          "/configuration/resource/catalogueInfo?modelId=" +
          id +
          "&modelType=" +
          modelType +
          "&name=" +
          name,
      });
    },
  },
  created() {
    this.getData(this.colList);
  },
};
</script>

<style lang="scss" scoped>
#catalogue {
  .el-row {
    margin-top: 20px;
    margin-bottom: 20px;
    height: calc(100vh - 170px);
    overflow-y: scroll;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .grid-content {
    min-height: 36px;

    .item_box {
      box-sizing: border-box;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 5px;
      background-color: #ffffff;
      box-shadow: 0 0px 6px 2px #333c4812;

      p {
        padding: 0 0 15px 5px;
        font-weight: bold;
        border-bottom: 1px solid #ebf0f5;
      }

      .element_box {
        padding: 10px 5px;
        color: #2b3753;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;

        &:hover {
          color: #8a84ff;
          background-color: #ecf3ff;
          border-radius: 3px;
        }
      }
    }
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}
</style>
